<template>
  <div>
    <div class="header">
      <div class="searchBox">
        <el-input placeholder="请输入内容" v-model="searchValue" class="searchInput" @input="changeSearchValue"
          @keyup.enter.native="getList(1)">
          <el-select v-model="selectValue" slot="prepend" placeholder="请选择" class="selectType" @change="changeSelect">
            <el-option v-for="item in searchArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button slot="append" class="searchBtn" @click="getList(1)">搜索</el-button>
        </el-input>
        <div class="zankai" @click="changeUnfold()">
          {{ isUnfold ? "收起" : "展开"
          }}<i class="el-icon-arrow-up" style="margin-left: 4px" :class="{ UnfoldActive: !isUnfold }"></i>
        </div>
      </div>

      <div class="zankai_area" v-show="isUnfold == true">
        <el-row>
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">货源方</div>
              <input type="text" v-model="ownerName" class="input" placeholder="请输入关键字" @keyup.enter="getList(1)" />
            </div>
          </el-col>

          <el-col :span="8">
            <div class="inputBox">
              <div class="label">项目名称</div>
              <input type="text" v-model="projectName" class="input" placeholder="请输入关键字" @keyup.enter="getList(1)" />
            </div>
          </el-col>
          <!-- <el-col :span="8">
            <div class="inputBox">
              <div class="label">计划名称</div>
              <input type="text" v-model="planName" class="input" placeholder="请输入关键字" @keyup.enter="getList()" />
            </div>
          </el-col> -->
          <!--          <el-col :span="8">-->
          <!--            <div class="inputBox">-->
          <!--              <div class="label">下单人</div>-->
          <!--              <input type="text" v-model="customer" class="input" placeholder="请输入关键字" @keyup.enter="getList()" />-->
          <!--            </div>-->
          <!--          </el-col>-->
          <el-col :span="8">
            <div class="inputBox">
              <div class="label">承运车队</div>
              <input type="text" v-model="fleetName" class="input" placeholder="请输入关键字" @keyup.enter="getList(1)" />
            </div>
          </el-col>
          <el-col :span="8">
            <div class="inputBox" style="display: flex">
              <div class="label" >创建时间</div>
              <el-date-picker  v-model="createTime" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" align="right" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 24px"
              @click="getList(1)">搜索</el-button>
            <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearUp">清空</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="main">
      <div class="list">
        <el-table :data="records" :header-cell-style="tableHeaderStyle" :row-class-name="rowStyle" style="width: 100%"
          @selection-change="handleSelectionChange" header-align="left" ref="registTable">
          <el-table-column align="center" width="80" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="orderStatusStr" label="订单状态" width="120px">
            <template slot-scope="scope">
              <div class="tag dispatched" v-if="scope.row.orderStatus == 13">
                <!-- CANCEL( code: 13， info:"待调度"]; -->
                <div class="dian"></div>
                <div class="text">待调度</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="orderNo" label="订单编号"></el-table-column>
          <el-table-column align="left" prop="ownerName" label="货源方">
          </el-table-column>
          <el-table-column align="left" prop="projectName" label="项目名称">
          </el-table-column>
          <!--          <el-table-column align="left" label="线路">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div v-if="scope.row.lineName">-->
          <!--                {{ scope.row.lineName }}-->
          <!--              </div>-->
          <!--              <div v-else>&#45;&#45;.&#45;&#45;</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column align="left" prop="customerName" label="下单人">-->
          <!--          </el-table-column>-->
          <el-table-column align="left" prop="fleetName" label="承运车队">
          </el-table-column>
          <!--          <el-table-column align="left" label="接单人">-->
          <!--            <template slot-scope="scope">-->
          <!--              <div v-if="scope.row.supplierName">-->
          <!--                {{ scope.row.supplierName }}-->
          <!--              </div>-->
          <!--              <div v-else>&#45;&#45;.&#45;&#45;</div>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="left" prop="createTime" label="创建时间" sortable>
          </el-table-column>
          <el-table-column align="left" label="操作" width="105">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" @click="
                  $router.push({
                    path: '/home/carrierOrder/details',
                    query: { id: scope.row.orderId },
                  })
                  ">详情</el-button>
                <el-button type="text" size="small" v-if="scope.row.orderStatus == 13"
                  @click="dispatchBtn(scope.row)">调度</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :total="data.total * 1" :page-size="pageSize * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ pageSize }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>

    <!-- 添加司机弹框 -->
    <el-dialog title="添加司机" :visible.sync="addDriverVisible" width="840px" class="addDriver_dialog">
      <div class="titleBox">
        <div class="title">承运方当前可调动司机：</div>
      </div>
      <div class="dialog_list">
        <el-table :data="driverDetailsData" style="width: 100%" header-align="left"
          :row-style="{ color: '#595959', fontSize: '12px' }" ref="registTable">
          <el-table-column align="left" type="selection" width="50"></el-table-column>
          <el-table-column align="left" prop="" width="50" label="序号">
            <template slot-scope="scope">
              <div>
                {{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="driverPic" label="司机照片">
            <template slot-scope="scope">
              <div class="driverPicBox">
                <img :class="scope.row.drivePhoto" :src="scope.row.driverPhoto" alt="" width="65" height="48" />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" label="司机姓名">
            <template slot-scope="scope">
              <el-popover placement="bottom-start" width="505" trigger="click" class="popover">
                <div class="BulletBox">
                  <div class="info_item">
                    <div class="titleBox">
                      <div class="icon-xinxi iconfontcolor"></div>
                      <h3 class="title">司机信息</h3>
                      <div class="line"></div>
                    </div>
                    <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                      color: '#939393',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      marginRight: '20px',
                    }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                      <el-descriptions-item label="司机姓名">{{
                        scope.row.driverName
                      }}</el-descriptions-item>
                      <el-descriptions-item label="准驾车型">{{
                        scope.row.licenseLevel.message
                      }}</el-descriptions-item>
                      <el-descriptions-item label="身份证号">{{
                        scope.row.idCard
                      }}</el-descriptions-item>
                      <el-descriptions-item label="司机年龄">{{
                        scope.row.age
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                  <div class="info_item">
                    <div class="titleBox">
                      <div class="icon-xinxi iconfontcolor"></div>
                      <h3 class="title">车辆信息</h3>
                      <div class="line"></div>
                    </div>
                    <el-descriptions class="driverCarInfo" :column="2" :labelStyle="{
                      color: '#939393',
                      fontSize: '12px',
                      fontWeight: 'bold',
                      marginRight: '20px',
                    }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
                      <el-descriptions-item label="车辆类型">{{
                        scope.row.vehicleType
                      }}</el-descriptions-item>
                      <el-descriptions-item label="车牌号">{{
                        scope.row.numberplate
                      }}</el-descriptions-item>
                      <el-descriptions-item label="品牌型号">{{
                        scope.row.brandModel
                      }}</el-descriptions-item>
                      <el-descriptions-item label="规格">{{
                        scope.row.specification
                      }}</el-descriptions-item>
                      <el-descriptions-item label="参数">{{
                        scope.row.vehicleAttrs
                      }}</el-descriptions-item>
                    </el-descriptions>
                  </div>
                </div>
                <div class="driverNameBox" slot="reference">
                  <div class="driverName">{{ scope.row.driverName }}</div>
                  <i class="iconfont icon-info"></i>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="age" label="年龄" width="60">
          </el-table-column>
          <el-table-column align="left" prop="phoneNumber" label="联系电话">
          </el-table-column>
          <el-table-column align="left" prop="numberplate" label="绑定车辆">
          </el-table-column>
          <el-table-column align="left" prop="licenseLevel.message" label="准驾车型" width="80">
          </el-table-column>
        </el-table>
      </div>

      <div class="dialog_footer">
        <el-button class="cancelBtn2" @click="addDriverVisible = false">取 消</el-button>
        <el-button class="submitBtn2" type="primary" @click="driverVerify">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="调度" :visible.sync="dialogVisibleDispatch" width="840px">
      <!-- <el-form-item prop="DispatchingDriver"> -->
      <div class="addDriverBox" v-show="SchedulingForm.isDispatchingDriver == 1">
        <div class="addDriverBox_head">
          <el-button type="primary" class="addDriverBtn" @click="showAddDriverDialog()">
            <i class="el-icon-plus iconBtn"></i>
            <span>添加司机</span>
          </el-button>
          <span style="color: #666666; font-size: 12px">
            该单总运量为<span style="color: #1890ff">
              {{ cargoWeight ? cargoWeight : 0 }}
            </span>
          </span>
        </div>
        <div class="addDriverTableBox">
          <el-table class="pointDeparture_table" :data="SchedulingForm.DispatchingDriver" show-summary
            :summary-method="getSummaries">
            <el-table-column align="left" prop="" width="50" label="序号">
              <template slot-scope="scope">
                <div>
                  {{ scope.$index + 1 + Number(pageSize) * (pageCurrent - 1) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="司机姓名" prop="driverName"></el-table-column>
            <el-table-column align="center" label="车辆信息">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.numberplate + "-" + scope.row.vehicleType }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="运量" prop="cargoWeight">
              <template slot-scope="scope">
                <el-input v-model="scope.row.cargoWeight"> </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单位">
              <template>
                <el-select v-model="measureUnit.info" placeholder="请选择" disabled>
                  <el-option v-for="item in jiliangdawei" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align="center" label="司机单价(元)" prop="unitPrice">
              <template slot-scope="scope">
                <el-input v-model="scope.row.unitPrice"> </el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="司机运费(元)" prop="freight">
              <template slot-scope="scope">
                <el-input v-model="scope.row.freight"> </el-input>
              </template>
            </el-table-column>

            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <i class="iconfontcolor icon-a--" @click="addDispatchDriver(scope.$index)"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- </el-form-item> -->

      <div slot="footer" class="dialog_footer">
        <el-button class="cancelBtn2" @click="dialogVisibleDispatch = false">取 消</el-button>
        <el-button class="submitBtn2" type="primary" @click="dialogSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import breadcrumb from "@/components/breadcrumb";
import httpApi from "@/http";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      addDriverVisible: false,
      isUnfold: false,
      carUseTime: "", //用车时间
      supplierName: "", //承运方
      orderNo: "", //订单编号
      createTime:"",//创建时间
      startTime: "", //开始时间
      endTime: "", //结束时间
      fleetName:"",//承运车队
      ownerName: "", //货源方名称
      orderStatus: "", //订单状态
      planName: "", //计划名称
      projectName: "", //项目名称
      customer: "", //下单人

      searchValue: "",

      searchArr: [
        { label: "订单编号", value: "orderNo" },
        { label: "货源方", value: "ownerName" },
        // { label: "计划名称", value: "planName" },
        { label: "项目名称", value: "projectName" },
        // { label: "下单人", value: "customer" },
        { label: "承运车队", value: "fleetName" },
      ],
      operateValue: "",
      searchFrom: {},
      selectValue: "orderNo",

      data: {},
      records: [],
      options: [
        {
          value: "批量取消",
          label: "批量取消",
        },
      ],
      multipleSelection: [], //存放批量选择的订单
      selectionLegth: 0, //已选择几项
      operateValue: "",
      enterpriseName: "", //企业名称 值
      pageCurrent: "1", //当前页
      pageSize: "10", //每页10条
      driverDetailsData: "", //调度司机列表
      diverMood: "",
      // 调度信息 表单数据
      SchedulingForm: {
        overTime: "",
        fahuoTime: "",
        shouHuoTime: "",
        Carrier: "",
        isDispatchingDriver: "1",
        DispatchingDriver: [],
        carType: "",
        beizhu: "",
        volume: "",
      },
      dialogVisibleDispatch: false,
      jiliangdawei: [
        { value: "1", label: "车" },
        { value: "2", label: "吨" },
        { value: "3", label: "件" },
      ],
      cargoWeight: 0, //货物总运量
      measureUnit: "", //运量计算单位
      orderId: "", //合同id
      compute: false,
    };
  },

  methods: {
    clearUp() {
        this.orderNo = ''; //订单编号
        this.projectName = ''; //项目名称
        // this.planName = '', //计划名称
        this.ownerName = ''; //货源方名称
        this.createTime='';
        this.fleetName='';
        this.searchValue=''
        this.fleetName=''
        
        // this.supplierName = '', //接单人
        // this.customer = '', //下单人姓名
       

      this.getList(1);
    },
    changeUnfold() {
      this.isUnfold = !this.isUnfold;
    },
    changeSelect(val) {
      this.selectValue = val;
    },
    changeSearchValue(val) {
      this.searchValue = val;
    },




    getList(initpageNo) {
      let params = {};

      if (this.selectValue == "orderNo") {
        ////console.log(this.searchValue);
        this.orderNo = this.searchValue;
      }
      this.searchArr.forEach(item=>{
        if(this.selectValue==item.value){
          this[item.value]=this.searchValue
     
        }
      })
     
  
    
      params = {
        pageNo:initpageNo || this.pageCurrent,
        pageSize: this.pageSize,
        orderNo: this.orderNo, //订单编号
        projectName: this.projectName, //项目名称
        // planName: this.planName, //计划名称
        ownerName: this.ownerName, //货源方名称
        fleetName:this.fleetName,
        // supplierName: this.supplierName, //接单人
        startTime: this.createTime!=null?this.createTime[0]:'', //开始时间
        endTime: this.createTime!=null?this.createTime[1]:'', //结束时间
   
      };
      ////console.log(params);
      httpApi.carrierOrderApi.getWaitDispatchList(params).then((res) => {
        ////console.log("列表", res);
        this.records = res.data.data.records;

        this.data = res.data.data;


        ////console.log(res.data.data.records);
      });
    },
    // 列表数据选择变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
      let supplierIdArr = [];
      //数组转字符串
      this.multipleSelection.forEach((item) => {
        supplierIdArr.push(item.orderId);
      });
      this.multipleSelection = supplierIdArr.join(",");
      this.selectionLegth = supplierIdArr.length;
      ////console.log("批量选择", this.multipleSelection);
    },

    BatchOperation(val) {
      ////console.log(val);
      if (val == "批量取消") {
        this.$confirm("此操作将批量取消运单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 发起批量删除请求
            if (this.multipleSelection != "") {
              let params = {
                orderId: this.multipleSelection,
              };
              ////console.log("批量取消传参", params);
              httpApi.orderManagementApi
                .deleteCarrierOrder(params)
                .then((res) => {
                  ////console.log("批量取消", res);
                  if (res.data.code == 200) {
                    this.getList(); //删除后 更新列表数据
                    this.$message({
                      type: "success",
                      message: "批量取消运单成功!",
                    });
                  }
                });
            } else if (this.multipleSelection == "") {
              this.$message.warning("请选择取消项");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消操作",
            });
          });
        this.operateValue = "批量操作"; //重置
      }
    },
    DeleteItem(orderId) {
      ////console.log(orderId);
      this.$confirm("此操作将取消运单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起单个删除请求

          httpApi.orderManagementApi
            .deleteCarrierOrder({ orderId: orderId })
            .then((res) => {
              ////console.log("取消结果", res);
              if (res.data.code == 200) {
                this.getList();
                //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "取消成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "取消失败!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },

  
    changePages(val) {
      //页码变化时
      this.pageCurrent = val.toString();
      this.getList();
    },
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return "font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F0F6FD;height:48px;paddingTop:0px;paddingBottom:0px;";
    },
    rowStyle({ row, rowIndex }) {
      return "global_tableRowStyleName";
    },
    // 点击调度
    dispatchBtn(val) {
      let params = {
        fleetId: val.fleetId,
      };
      this.orderId = val.orderId;
      this.cargoWeight = val.cargoWeight;
      this.measureUnit = val.measureUnit;
      httpApi.carrierOrderApi.getOrderQueryDriver(params).then((res) => {
        if (res.data.code == 200) {
          this.driverDetailsData = res.data.data;
        }
        this.addDriverVisible = true;
      });
    },
    //选择司机确认
    driverVerify() {
      this.addDriverVisible = false;
      this.SchedulingForm.DispatchingDriver = [];
      this.SchedulingForm.DispatchingDriver = this.$refs.registTable.selection;
      ////console.log(this.SchedulingForm.DispatchingDriver, "2222222222");
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        this.SchedulingForm.DispatchingDriver[i].cargoWeight = "";
        this.SchedulingForm.DispatchingDriver[i].freight = "";
        this.SchedulingForm.DispatchingDriver[i].unitPrice = "";
        this.SchedulingForm.DispatchingDriver[i].measureUnit = this.measureUnit;
      });
      this.SchedulingForm.DispatchingDriver = JSON.parse(
        JSON.stringify(this.SchedulingForm.DispatchingDriver)
      );
      this.dialogVisibleDispatch = true;
    },
    // 表格合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];

      if (param.columns.length == 0) {
        return;
      }
      ////console.log("param", param);

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        //8列   序号 1列 2 4 7 不参与合计 单元内容返回 return 空显示
        if (index === 1 || index === 2 || index === 4 || index === 7) {
          sums[index] = "";
          return;
        }

        ////console.log("123", column.property);
        // 遍历运量 司机单价 司机运费 字符串转Number
        //遍历列表 转换输入框的值为 Number
        const values = data.map((item) => {
          ////console.log("值", item[column.property]);
          return Number(item[column.property]); //返回 数字 数据 到values数组
        });

        ////console.log("values", values);
        //   every()方法会遍历数组的每一项，如果有有一项不满足条件，则表达式返回false,剩余的项将不会再执行检测；如果遍历完数组后，每一项都符合条，则返回true。
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if (index == 3) {
            ////console.log("运量");
            if (sums[index] > this.cargoWeight) {
              sums[index] = "分配的运量超出总运量";
              this.compute = false;
              return sums;
            } else {
              this.compute = true;
              sums[index] += 0;
              return sums;
            }
          }
          ////console.log(sums[index]);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },
    showAddDriverDialog() {
      // httpApi.carrierOrderApi.getOrderQueryDriver(params).then((res) => {
      //   if (res.data.code == 200) {
      //     this.driverDetailsData = res.data.data;
      //   }
      this.addDriverVisible = true;
      let that = this;
      this.$refs.registTable.clearSelection();
      setTimeout(() => {
        that.driverDetailsData.forEach((row, i) => {
          that.SchedulingForm.DispatchingDriver.forEach((item, i) => {
            if (row.driverId == item.driverId) {
              that.$refs.registTable.toggleRowSelection(row);
            }
          });
        });
      }, 1000);
      // });
    },
    dialogSubmit() {
      ////console.log(this.SchedulingForm.DispatchingDriver);
      let cont = [];
      let drivers = [];
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        cont.push({
          driverName: item.driverName,
          unitPrice: item.unitPrice,
          measureUnit: item.measureUnit.code,
          freight: item.freight,
          driverId: item.driverId,
          cargoWeight: item.cargoWeight,
          numberplate: item.numberplate,
        });
        drivers.push(item.driverId);
      });
      // dirver = Array.from(new Set(dirver))
      if (!this.compute) {
        this.$message.error("司机分配运量大于总运量");
        return false;
      }

      let appointDrivers = drivers.join(",");

      let params = {
        orderId: this.orderId,
        orderDispatches: cont,
        appointDrivers: appointDrivers,
      };
      httpApi.carrierOrderApi.addDriver(params).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("提交成功");
          this.$router.go(0);
        } else {
        }
      });
      this.dialogVisibleDispatch = false;
    },

    addDispatchDriver(e) {
      this.SchedulingForm.DispatchingDriver.forEach((item, i) => {
        if (i == e) {
          this.SchedulingForm.DispatchingDriver.splice(i, 1);
        }
      });
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.registTable.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.registTable.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.registTable.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },
  mounted() {
    this.getList();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.header {
  background-color: #ffffff;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 8px;

  .searchBox {
    height: 76px;
    display: flex;
    align-items: center;

    ::v-deep .el-input__inner {
      height: 32px;
      line-height: 32px;
      padding: 10px 9px 9px;
    }

    ::v-deep .el-input__icon {
      line-height: 0;
    }

    ::v-deep .el-input-group__append {
      border: none;
    }

    .selectType {
      width: 90px;
      height: 32px;
      color: #262626;
      font-size: 12px;
      background-color: #ffffff;

      ::v-deep .el-input-group__prepend {
        height: 32px !important;
      }

      ::v-deep .el-input__inner {
        height: 30px;
        line-height: 30px;
        height: 32px;
        line-height: 32px;
        padding: 10px 9px 9px;
        //border-bottom: 1px solid #f0f0f0;
      }

      ::v-deep .el-input__inner {
        border: 1px solid #f0f0f0;
      }
    }

    .searchInput {
      width: 480px;
      height: 32px;
    }

    .searchBtn {
      background-color: #1890ff;
      color: #ffffff;
      font-size: 12px;
      width: 80px;
      height: 32px;
      border-radius: 0;
    }

    .zankai {
      color: #1890ff;
      font-size: 12px;
      margin-left: 19px;
      cursor: pointer;

      &:hover {
        opacity: 0.8;
        transition: 0.2s;
      }

      .UnfoldActive {
        transition: 0.3s;
        transform: rotateZ(180deg);
      }

      .el-icon-arrow-right {
        color: #1890ff;
        font-size: 12px;
      }
    }
  }

  .zankai_area {
    width: 100%;

    .inputBox {
      display: flex;
      margin-bottom: 16px;

      ::v-deep .el-input__inner {
        height: 32px;
        line-height: 32px;
        padding: 0 10px;
      }

      .label {
        font-size: 12px;
        width: 72px;
        line-height: 32px;
        height: 32px;
        text-align: right;
        color: #262626;
        margin-right: 8px;
      }

      .input {
        height: 32px;
        width: 225px;
        border-radius: 4px;
        border: 1px solid #f0f0f0;
        padding: 0 10px;
        font-size: 12px;

        &:focus {
          border: 1px solid #1890ff;
        }
      }

      .orderSelector {
        width: 225px;

        ::v-deep .el-input__icon {
          line-height: 0;
        }
      }

      .datePicker {
        ::v-deep .el-input__icon {
          display: none;
        }
      }
    }
  }
}

.main {
  background-color: #fff;
  // 64 + 76 +14+17 +16+8 =171
  height: calc(100vh - 275px);
  width: 100%;
  padding: 0px 30px;
}

.list {
  height: calc(100% - 48px);

  ::v-deep .el-table__body-wrapper {
    height: calc(100vh - 371px) !important;
    overflow-y: scroll;
  }

  .tag {
    width: 63px;
    height: 28px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;

    .dian {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      margin-right: 4px;
    }

    // 待派车标签 样式
    &.waitDispatch {
      background-color: #fffce8;
      color: #f9aa0d;

      .dian {
        background-color: #f9aa0d;
      }
    }

    &.gery {
      background-color: #f7f8f8;
      color: #a8b0b6;

      .dian {
        background-color: #a8b0b6;
      }
    }

    //已派车 和运输中 样式
    &.dispatched {
      background-color: #ecf5fe;
      color: #1890ff;

      .dian {
        background-color: #1890ff;
      }
    }

    //已完成
    &.complete {
      background-color: #ebfef5;
      color: #1acb7a;

      .dian {
        background-color: #1acb7a;
      }
    }

    //已取消
    &.Canceled {
      background-color: #fde8e9;
      color: #f5222d;

      .dian {
        background-color: #f5222d;
      }
    }
  }
}

.paginationBox {
  width: 100%;
  background-color: #fff;
  display: flex;
  height: 48px;
  align-items: center;

  .pagination {
    margin-left: auto;
  }
}

// 添加司机对话框
.addDriver_dialog {
  .dialog_footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    height: 80px;
    padding: 20px 0 24px;

    .cancelBtn2 {
      width: 80px;
      height: 36px;
      border: 1px solid #d9d9d9;
      color: #262626;
      font-size: 12px;
      border-radius: 4px;
      background-color: #fff;
      margin-right: 14px;

      &:hover {
        opacity: 0.8;
        transition: 0.2;
      }
    }

    .submitBtn2 {
      background-color: #1890ff;
      width: 80px;
      height: 36px;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
    }

    &:hover {
      opacity: 0.8;
      transition: 0.2;
    }
  }

  ::v-deep .el-dialog__body {
    padding: 31px 40px 24px 40px;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
  }

  .titleBox {
    display: flex;
    margin-bottom: 17px;

    .title {
      color: #262626;
      font-size: 12px;
    }
  }

  .dialog_list {
    border: 1px solid #f0f0f0;
    border-bottom: none;

    .driverPicBox {
      height: 48px;
      width: 65px;
      background-color: #f1f0f0;

      .driverImg {
        height: 48px;
        width: 65px;
      }
    }

    .driverNameBox {
      display: flex;

      .driverName {
        color: #595959;
        font-size: 12px;
        margin-right: 5px;
      }

      .icon-info {
        font-size: 13px;
        color: #595959;
      }
    }

    // 表头样式
    ::v-deep .el-table__header th {
      padding: 8px 0;
    }

    ::v-deep .el-table__header th {
      background-color: #f5f5f5;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: left;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #262626;
        font-size: 12px;
      }
    }

    // 表身体
    ::v-deep .el-table__row {
      height: 76px;
    }

    ::v-deep .el-table-column--selection .cell {
      padding-left: 16px;
      padding-right: 16px;
    }
  }
}
</style>

<style lang="scss">
.global_tableRowStyleName {
  height: 48px;
  color: #262626 !important;
  font-size: 12px;
  padding: 0px;
}

.BulletBox {
  padding: 18px 12px;

  >.info_item {
    >.titleBox {
      display: flex;
      align-items: center;
      margin-bottom: 14px;

      >.icon-xinxi {
        font-size: 16px;
        margin-right: 7px;
      }

      >.title {
        color: #262626;
        font-size: 14px;
        margin-right: 14px;
      }

      >.line {
        height: 1px;
        flex: 1;
        background-color: #f0f0f0;
      }
    }
  }
}
</style>
